<template>
  <div>
    <div class="left" style="margin-top:20px;display: flex;">
      <el-button type="info" disabled>班级选择</el-button>
      <el-col :span="1"></el-col>
      <el-select v-model="value" @change="Choose" placeholder="请选择" >
        <el-option
          v-for="item in choose"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </div>
    <div class="right" style="margin-top:20px;">
      <el-button type="primary" icon="el-icon-plus" @click="dialogaddstudent = true">添加学生</el-button>
      <el-button type="danger" icon="el-icon-delete">移除学生</el-button>
      <el-button type="primary" icon="el-icon-upload">导出名单</el-button>
    </div>
    <el-dialog
      title="添加学生"
      :visible.sync="dialogaddstudent"
      width="60%">
      <el-form  :inline="true" label-width="80px">
        <el-form-item label="加入班级" >
          <el-select v-model="value" @change="Choose" placeholder="请选择" >
            <el-option
              v-for="item in choose"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学生姓名" >
          <el-input v-model="stuadd.stu_name" autocomplete="off" clearable></el-input>
        </el-form-item>
        <el-form-item label="学生学号" >
          <el-input v-model="stuadd.stu_no" autocomplete="off" clearable></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
              <el-button @click="dialogaddstudent = false">取 消</el-button>
              <el-button type="primary" plain @click="lookforstu(stuadd)">添 加</el-button>
      </span>
    </el-dialog>
    <div style="margin-top:20px;margin-right:20px;margin-left:20px;">
      <el-table
        :data="studenttable"
        border
        style="width: 100% ;top: 25px">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          fixed
          prop="id"
          label="序号"
          width="150">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="220">
        </el-table-column>
        <el-table-column
          prop="stu_id"
          label="学号/工号"
          width="220">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="150">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">访问</el-button>
            <el-button @click="dialogdelete = true,getrow(scope.row)"  type="text" size="small">移除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        title="提示"
        :visible.sync="dialogdelete"
        width="30%">
        <span>确定要移除吗？</span>
        <span slot="footer" class="dialog-footer">
              <el-button @click="dialogdelete = false">取 消</el-button>
              <el-button type="danger" @click="dialogdelete = false,handleDelete(row)">移 除</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { BaaS } from '@/api/user'
var baas = BaaS()

export default {
  data() {
    return {
      row: null,
      choose: null,
      value: '',  //班级编号
      studenttable: '',
      stujson: '', //存储student json格式
      dialogdelete: false, //移除对话框
      dialogaddstudent: false,
      stuadd: {
        stu_name: '', //学生名字
        stu_no: '' //学生学号
      }
    }
  },
  computed: {
    ...mapGetters([
      'currentUser'
    ])
  },
  created() {
    var BaaS = require('minapp-sdk')
    BaaS.init(baas)
    var query = new BaaS.Query()
    query.compare('teacher_id', '=', this.currentUser.id.toString())
    var Product = new BaaS.TableObject('class')
    Product.setQuery(query).find().then(res => {
      // success
      var classname = []
      for (var i = 0; i < res.data.objects.length; i++) {
        // var dict ={}
        // dict.set{'value',res.data().objects[i].class_name}
        classname.push({   //类似于JS添加JSON的字典方法，Key对应键值，value对应值
          'label': res.data.objects[i].class_name,
          'value': res.data.objects[i].id
        })
        console.log(res.data.objects)
      }
      this.choose = classname
    }, err => {
      // err
      console.log(err)
    })
  },
  mounted() {
    console.log(this.value)
  },
  methods: {
    handleClick(row) {
      console.log(row.id)
    },
    getrow(row) {
      this.row = row.id
    },
    handleDelete(row) {    //移除
      var BaaS = require('minapp-sdk')
      BaaS.init(baas)
      var query = new BaaS.Query()
      console.log(this.stujson[row]._id)
      query.compare('user_id', '=', this.stujson[row]._id)
      var Product = new BaaS.TableObject('zuowenban')
      Product.setQuery(query).find().then(res => {
        console.log(res.data.objects)
        Product.delete(res.data.objects[0]._id).then(res => {
          // success
          this.Update(this.value)
          this.$message({
            message: '移除成功',
            type: 'success'
          })
        }, err => {
          // err
        })
        // var mm = new BaaS.TableObject('zuowenban')
        // var product = mm.getWithoutData(res.data.objects[0]._id)
        // product.set({
        //   'class_name': null,
        //   'class_id': null
        // })
        // product.update().then(res => {
        //   // success
        //   this.Update(this.value)
        //   this.$message({
        //     message: '移除成功',
        //     type: 'success'
        //   })
        // })
      })
    },
    Choose(value) {  //选择
      console.log(this.value)
      this.studenttable = []
      var BaaS = require('minapp-sdk')
      BaaS.init(baas)
      var query = new BaaS.Query()
      query.compare('class_id', '=', this.value)
      var Product = new BaaS.TableObject('zuowenban')
      Product.setQuery(query).find().then(res => {
        // success
        var stuid = []
        for (var i = 0; i < res.data.objects.length; i++) {
          stuid.push(  //添加数组元素
            res.data.objects[i].user_id
          )
        }
        console.log(stuid)
        var query1 = new BaaS.Query()
        query1.in('_id', stuid)
        var stutable = new BaaS.TableObject('student')
        stutable.setQuery(query1).find().then(res => {
          // success 学生信息
          console.log(res.data.objects)
          this.stujson = res.data.objects
          var stuinfo = []
          for (var i = 0; i < res.data.objects.length; i++) {
            // var dict ={}
            // dict.set{'value',res.data().objects[i].class_name}
            stuinfo.push({   //类似于JS添加JSON的字典方法，Key对应键值，value对应值
              'id': i,
              'name': res.data.objects[i].stu_name,
              'stu_id': res.data.objects[i].stu_no,
            })
            this.studenttable = stuinfo
          }
        }, err => {
          // err
          console.log(err)
        })
      }, err => {
        // err
        console.log(err)
      })
    },
    Update(value) {  //选择
      this.studenttable = []
      var BaaS = require('minapp-sdk')
      BaaS.init(baas)
      var query = new BaaS.Query()
      query.compare('class_id', '=', value)
      var Product = new BaaS.TableObject('zuowenban')
      Product.setQuery(query).find().then(res => {
        // success
        var stuid = []
        for (var i = 0; i < res.data.objects.length; i++) {
          stuid.push(  //添加数组元素
            res.data.objects[i].user_id
          )
        }
        console.log(stuid)
        var query1 = new BaaS.Query()
        query1.in('_id', stuid)
        var stutable = new BaaS.TableObject('student')
        stutable.setQuery(query1).find().then(res => {
          // success 学生信息
          console.log(res.data.objects)
          this.stujson = res.data.objects
          var stuinfo = []
          for (var i = 0; i < res.data.objects.length; i++) {
            // var dict ={}
            // dict.set{'value',res.data().objects[i].class_name}
            stuinfo.push({   //类似于JS添加JSON的字典方法，Key对应键值，value对应值
              'id': i,
              'name': res.data.objects[i].stu_name,
              'stu_id': res.data.objects[i].stu_no,
            })
            this.studenttable = stuinfo
          }
        }, err => {
          // err
          console.log(err)
        })
      }, err => {
        // err
        console.log(err)
      })
    },
    lookforstu(stuform) {
      var classname = null
      for (var i = 0; i < this.choose.length; i++) {
        if (this.choose[i].value == this.value) {
          classname = this.choose[i].label
        }
      }
      var BaaS = require('minapp-sdk')
      BaaS.init(baas)
      var query = new BaaS.Query()
      var Product = new BaaS.TableObject('student')
      query.compare('stu_name', '=', stuform.stu_name)
      query.compare('stu_no', '=', stuform.stu_no)
      if (this.value == '' || stuform.stu_name =='' || stuform.stu_no == '' ){
        this.$message.error('错了哦，信息未填写完整')
      } else {
        Product.setQuery(query).find().then(res => {
          // success
          if (res.data.objects.length == 0) {
            this.$message.error('错了哦，未找到该同学信息')
          } else {
            var query1 = new BaaS.Query()
            query1.compare('user_id', '=', res.data.objects[0]._id)
            var ID = res.data.objects[0]._id
            query1.compare('class_id', '=', this.value)
            var zwb = new BaaS.TableObject('zuowenban')
            zwb.setQuery(query1).find().then(res => {
              // success
              if (res.data.objects.length == 0) {
                console.log(res.data.objects)
                var product = zwb.create()
                product.set({
                  'user_id': ID,
                  'class_name': classname,
                  'class_id': this.value
                })
                product.save().then(res => {
                  // success
                  this.Update(this.value)
                  this.$message({
                    showClose: true,
                    message: '添加成功',
                    type: 'success'
                  })
                  this.dialogaddstudent = false
                }, err => {
                  //err 为 HError 对象
                })
              } else {
                this.$message({
                  showClose: true,
                  message: '该同学已经加入此班级了',
                  type: 'warning'
                })
              }
            }, err => {
              // err
              console.log(err.code)
            })
          }
        }, err => {
          // err
          console.log(err.code)
        })
      }
    }
  }
}
</script>
<style>
.left{
  width:450px;
  margin-left: 20px;
  float:left;
}
.right{
  width:400px;
  float:right;
  margin-right: 20px;
}
</style>
